<script>
import { mapState } from 'vuex'

export default {
  name: 'entDetail',
  data() {
    return {
      detail: {},
      loading: false
    }
  },
  methods: {
    formatterStatus(row) {
      const MAP = { 0: '待生效', 1: '生效中', 2: '已到期', 3: '已退租' }
      return MAP[row.status] || '未知'
    },
    formatTagType(row) {
      const MAP = { 0: 'warning', 1: 'success', 2: 'info', 3: 'danger' }
      return MAP[row.status]
    },
    /* 查询企业的回调函数 */
    async findEnterprise(id) {
      try {
        this.loading = true
        const detail = await this.$store.dispatch('enterpriseStore/findEnterprise', id)
        this.detail = detail
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    },
    /* 获取行业列表的回调函数 */
    async fetchIndustryList() {
      try {
        await this.$store.dispatch('enterpriseStore/fetchIndustryList')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    renderIndustryCode(code) {
      return this.industryList.find(item => item.industryCode === code)?.industryName || '未知'
    }
  },
  computed: {
    ...mapState('enterpriseStore', ['industryList'])
  },
  mounted() {
    this.fetchIndustryList()
  },
  emits: ['back']
}
</script>

<template>
  <div class="entDetail" v-loading="loading" element-loading-text="拼命加载中" element-loading-background="rgb(255, 255, 255)">
    <el-card shadow="never">
      <template #header>
        <span>企业信息</span>
      </template>
      <el-row>
        <el-col :span="12">
          <span>企业名称: {{ detail.name }}</span>
        </el-col>
        <el-col :span="12">
          <span>法人代表: {{ detail.legalPerson }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span>注册地址: {{ detail.registeredAddress }}</span>
        </el-col>
        <el-col :span="12">
          <span>所在行业: {{ renderIndustryCode(detail.industryCode) }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span>营业执照: </span>
          <img :src="detail.businessLicenseUrl">
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <template #header>
        <span>联系人信息</span>
      </template>
      <el-row>
        <el-col :span="12">
          <span>企业联系人:{{ detail.contact }}</span>
        </el-col>
        <el-col :span="12">
          <span>联系电话:{{ detail.contactNumber }}</span>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <template #header>
        <span>租赁记录</span>
      </template>
      <el-table size="small" border stripe :header-cell-style="{backgroundColor:'#f4f6f8'}" :data="detail.rent">
        <el-table-column label="序号" type="index" align="center"></el-table-column>
        <el-table-column label="租赁楼宇" prop="name" align="center" width="120px"></el-table-column>
        <el-table-column label="合同状态" prop="status" align="center" width="120px">
          <template #default="{row}">
            <el-tag effect="dark" :type="formatTagType(row)">{{ formatterStatus(row) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="租赁起止时间" align="center">
          <template #default="{row}">
            <span>{{ row.startTime }}-{{ row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="租赁合同">
          <template #default="{row}">
            <a :href="row.contractUrl">{{ row.contractName }}</a>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="createTime" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <a :href="row.contractUrl">下载合同</a>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="info" @click="$emit('back')" size="small">返回</el-button>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.entDetail {
  .el-card {
    margin-bottom: 10px;

    .el-row {
      margin: 20px 0;

      span {
        color: #9d9d9d;
      }
    }

    .el-table {
      margin: 10px 0;
    }

    img {
      width: 200px;
    }

    a {
      color: #4770FF;
    }
  }
}
</style>
